.neo-list-wrapper {
    background-color: var(--list-container-background-color);
    border          : var(--list-container-border);
    overflow        : hidden;
    position        : relative;
}

.neo-list {
    color               : var(--list-container-list-color);
    list-style-type     : none;
    margin-block-start  : 0;
    margin-block-end    : 0;
    margin-inline-start : 0;
    margin-inline-end   : 0;
    padding-inline-start: 0;
    overflow            : auto;

    &.neo-use-checkicons {
        .neo-list-item:before {
            color      : var(--list-item-glyph-color);
            content    : "\f0c8";
            display    : inline-block;
            font-family: var(--fa-style-family-classic);
            width      : 25px;
        }

        .neo-list-item.neo-selected:before {
            content    : "\f00c";
            font-weight: 900;
        }
    }

    &.neo-use-wrapper-node {
        height  : 100%;
        position: absolute;
        width   : 100%;
    }

    .neo-list-header {
        position: sticky;
        top     : 0;
    }

    .neo-list-item {
        background-color: var(--list-item-background-color);
        padding         : var(--list-item-padding);
        white-space     : nowrap;

        &:focus {
            outline: 0;
        }

        &:not(.neo-list-header) {
            cursor: pointer;

            &:hover {
                background-color: var(--list-item-background-color-hover);
                color           : var(--list-container-list-color);
            }
            &:active {
                background-color: var(--list-item-background-color-active);
                color           : var(--list-container-list-color);
            }
        }

        &.neo-navigator-active-item {
            outline       : var(--list-item-focus-outline);
            outline-offset: var(--list-item-focus-outline-offset);
        }

        &[aria-selected="true"] {
            background-color: var(--list-item-background-color-selected);
            color           : var(--list-item-color-selected);
            cursor          : default;
        }

        .neo-highlight-search {
            color: var(--list-item-highlight-search-color);
        }
    }
}
